<template>
<div class="integral clearfix">
    <div class="jfmain clearfix">
		<header>
			<span class="fl logo">
				<img :src="`${imgurl}logo_aireai.png`" @click="toUrl('/')" />
			</span>
			<nav>
				<span class="title" @click="toUrl('/')">
					<i>WIRE AI</i>
				</span>
				<span class="title" @click="toUrl('/shop')">
					<i>{{ $t('navbar.mall') }}</i>
				</span>
				<span class="title" @click="toUrl('/member')">
					<i>{{ $t('navbar.personal') }}</i>
				</span>
				<span class="title" @click="toUrl('/ranklist')">
					<i>{{ $t('navbar.rank') }}</i>
				</span>
			</nav>
		</header>
		<div class="jfBox clearfix">
			<div class="jfInfo clearfix">
				<span class="show home" @click="toHome">
					<img :src="`${imgurl}logo_aireai.png`"/>
				</span>
				<span class="show font1">
					<img :src="`${imgurl}font1.png`"/>
				</span>
				<div >
					<span class="tit-1">{{ $t('integral.tit1') }}<i>{{ $t('integral.tit2') }}</i></span>
				</div>
			</div>
			<div class="videoBox">
				<span v-if="!showVideo" class="btnplay show" @click="playVideo"></span>
				<img :src="`${imgshop}video.jpg?v=001`" v-show="!showVideo" class="poster" @click="playVideo"/>
				<video class="video" controls ref="videoPlayer" v-show="showVideo">
					<source src="http://img.wireai.com/static/images/integralVideo.mp4" type="video/mp4">
				</video>
			</div>
		</div>
        
        <div class="jfcontent">
            <span class="title show">{{ $t('integral.title') }}</span>
            <div class="content">
                <span class="tit-1 show">{{ $t('integral.tit_1') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_2') }}</span>
                <span class="tit-1 show">{{ $t('integral.tit_3') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_4') }}</span>
                <span class="tit-1 show">{{ $t('integral.tit_5') }}</span>
                <dl class="explain">
                    <dt class="flexC">{{ $t('integral.tit_5') }}</dt>
                    <dd>
                        <span class="titL">{{ $t('integral.tit_6') }}</span>
                        <span class="">{{ $t('integral.tit_7') }}</span>
                    </dd>
                    <dd>
                        <span class="titL">{{ $t('integral.tit_8') }}</span>
                        <span class="">{{ $t('integral.tit_9') }}</span>
                    </dd>
                </dl>
                <span class="tit-1 show">{{ $t('integral.tit_10') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_11') }}</span>
                <span class="tit-1 show">{{ $t('integral.tit_12') }}</span>
                <span class="tit-2 show">
                    {{ $t('integral.tit_13') }}<br/>
                    {{ $t('integral.tit_14') }}
                </span>
                <span class="tit-3 show">{{ $t('integral.tit_15') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_16') }}</span>
                <span class="tit-3 show">{{ $t('integral.tit_17') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_18') }}</span>
                <span class="tit-3 show">{{ $t('integral.tit_19') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_20') }}</span>
                <span class="tit-1 show">{{ $t('integral.tit_21') }}</span>
                <span class="tit-2 show">{{ $t('integral.tit_22') }}<br/>
					{{ $t('integral.tit_23') }}<br/>
					{{ $t('integral.tit_24') }}</span>
            </div>
        </div>
    </div>
</div>

</template>

<script setup lang='ts'>
const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
const imgshop = import.meta.env.VITE_APP_TITLE+'/assets/shop/';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
const showVideo = ref<boolean>(false);
const videoPlayer = ref(null);
const isHandle = ref<boolean>(true);
function toHome(){
    router.push({ 
        path:`/`
    })
    .catch(err => {
        console.error(err);
    });
}
function toUrl(url){
	router.push({ 
		path:url
	})
}
function playVideo() {
	showVideo.value = !showVideo.value;
	isHandle.value = !isHandle.value
	if(showVideo.value && videoPlayer.value){
		videoPlayer.value.play();
	}else{
		videoPlayer.value.pause();
	}
}
</script>
<style lang="scss" scoped>
.integral{
	width: 100%;
	background: url(../../assets/shop/jfbg.jpg) no-repeat top center #f6f9fe;
	padding-bottom: 75px;
}
.jfmain{
	max-width: 1200px;
	width:auto;
	margin: 0 auto;
	
	position: relative;
	color: #333333;
}
header{
	width: 100%;
    padding:0 60px;
	height: 75px;
	margin: 0 auto;
	display: flex;
	align-items: center;
    .logo{
        cursor:pointer;
        display:inline-block;
        height:25px;
    }
	nav{
        padding: 0 15px;
        float:left;
        height:100%;
    }
    .title{
        font-size: 16px;
        padding: 0 15px;
        height: 100%;
        float: left;
        cursor: pointer;
        position: relative;
        i{
            font-style: normal;
            display: inline-block;
            height: 100%;
            position: relative;
            font-family: 'siyuanR';
            color: #666666;
            height: 100%;
            transition: all .5s;
            transform-origin: center;
            align-items: center;
            justify-content: center;
            display: flex;
            &::after{
                position: absolute;
                bottom: 8px;
                content: '';
                left: 50%;
                width: 0;
                height: 4px;
                background-image: linear-gradient(to right,#2379ff, #9cfacd);
                border-radius: 4px;
                transition: all .5s;
            }
        }
        &.active{
            i{
                font-family: 'siyuanM';
                color:#333333;
                &:after{
                    width: 100%;
	                left: 0;
                }
            }
        }
        &:hover{
            i{
                color: #2379f7;
            }
        }
    }
}
.jfBox{
	width: 100%;
	display:flex;
	justify-content:space-between;
	padding-top: 69px;
	.videoBox{
		width:753px;
		height: 425px;
		position: relative;
		border-radius:15px;
		overflow: hidden;
		box-shadow: 2px 3px 13px rgba(72, 114, 246, .44);
		.btnplay{
			background: url(../../assets/shop/btnplay.png) no-repeat;
			background-size:100%;
			width:64px;
			height:64px;
			position:absolute;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%);
			z-index:20;
			cursor:pointer;
		}
		.poster{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index:10;
			border:solid 1px #fff;
			border-radius:15px;
		}
		.video{
			width: 100%;
			height:100%;
			object-fit: cover;
			background-color:none;
			outline: none !important;
			&:focus {
				outline:none !important;
			}
		}
	}
}
.jfInfo{
	flex:1;
	position: relative;
	padding:0 0 0 60px;
	display:flex;
	flex-direction:column;
	align-items:left;
	height:425px;
	justify-content:center;
    .home{
        cursor:pointer;
    }
}
.jfInfo .tit-1::after{
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, #cad2df,#b0c8ef, #b0c8ef); 
}
.jfInfo .tit-1::before{
	position: absolute;
	left: 0;
	bottom: -3px;
	content: '';
	width: 38px;
	height: 7px;
	background: #8d9299;
	z-index:10;
}
.jfInfo .show{
	width: 100%;
}
.jfInfo .font1{
	margin-top: 13px;
}
.jfInfo .tit-1{
	font-size: 20px;
	font-family: 'siyuanM';
	line-height: 45px;
	position: relative;
	height: 45px;
	display: inline-block;
}
.jfInfo .tit-1 i{
	z-index:10;
	font-style:normal;
	background: linear-gradient(90deg, #2379ff,#0ac1ba); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-size:20px;
	margin-left: 5px;
	
}
.jfcontent{
	width: 100%;
	background: #fff;
	padding: 15px 55px;
	border-radius: 10px;
	margin-top: 70px;
	position: relative;
}
.jfcontent::after{
	background: url(../../assets/images/bg7.png) no-repeat;
	padding-bottom: 100%;
	width: 134px;
	height: 63px;
	position: absolute;
	left: -37px;
	top:-50px;
	content: '';
}
.jfcontent .title{
	font-size: 28px;
	font-family: 'siyuanR';
	color: #333333;
	text-align: center;
	line-height: 90px;
	border-bottom: solid 1px #e8f3f3;
}
.jfcontent .content{
	padding: 20px 0;
}
.jfcontent .tit-2{
	color: #333;
	font-size: 15px;
	line-height: 28px;
	font-family: 'siyuanN';
	margin-bottom: 15px;
	margin-top: 5px;
}
.jfcontent .tit-3{
	color: #2379f7;
	padding-left: 10px;
	font-size: 15px;
	font-family: 'siyuanM';
	line-height: 30px;
}
.jfcontent .tit-1{
	padding-left: 10px;
	position: relative;
	color: #2379f7;
	font-size: 15px;
	font-family: 'siyuanM';
	line-height: 30px;
}
.jfcontent .tit-1::before{
	position: absolute;
	left: 0;
	top:50%;
	height:12px;
	background: #2379f7;
	width:3px;
	margin-top: -6px;
	border-left: solid 1px #d7e2fd;
	border-right: solid 1px #d7e2fd;
	content: '';
}
.jfcontent .explain{
	width: 490px;
	font-family: 'siyuanN';
	margin-bottom: 25px;
}
.jfcontent .explain dt{
	width: 100%;
	height: 26px;
	background: #2379f7;
	border-radius: 5px 5px 0 0;
	font-size: 15px;
	color: #fff;
}
.jfcontent .explain dd{
	width: 100%;
	height: 32px;
	background: #f1f2f5;
	font-size: 15px;
	margin-top: 5px;
	line-height: 32px;
	margin-left:0;
}
.jfcontent .explain .titL{
	width: 130px;
	text-align: center;
	display: inline-block;
	color: #2379f7;
	position: relative;
	margin-right: 15px;
}
.jfcontent .explain .titL::after{
	content: '';
	position: absolute;
	right:0;
	top:50%;
	height: 12px;
	margin-top: -6px;
	width: 2px;
	background: #c5c6c8;
	border-left: solid 1px #e7e8ea;
}
@media screen and (max-width:1200px) {
	.jfmain{
        width:100%;
    }
    .jfInfo{
        padding: 0 0 0 30px;
		height:200px;
		.home{
			display:none;
		}
    }
    .jfcontent{
        padding: 15px 20px;
        .explain{
            width:100%;
            font-size:12px;
            dt{
                font-size:12px;
            }
            dd{
                width:100%;
                margin-left:0;
                font-size:12px;
                display:flex;
            }
        }
    }
	.jfcontent .explain .titL{
		width:auto;
		padding: 0 10px;
		margin-right: 10px;
	}
	header{
        padding:0 0 0 20px;
        nav{
            padding:0 10px;
        }
        .title{
            padding:0 10px;
            font-size:14px;
        }
    }
	.jfBox{
		display:block;
		padding:0 20px;
		.videoBox{
			width:100%;
			height:240px;
		}
	}
}
</style>